<template>
	<!-- 金榜题名答题完成 -->
	<view class="answer-complete">
		<view class="user-msg">
			<image :src="avatarUrl"></image>
			<text>{{nickName}}</text>
		</view>
		<view class="answer-result">
			<view>
				十年寒窗苦读，恭喜你本次考取
				<text style="color:#FF4940;font-size: 28upx;" v-if="showGrade">“{{info.grade}}”</text>
				<text style="color:#FF4940;font-size: 28upx;" v-else>“功名”</text>
			</view>
			<view class="answer-result-grade">
				<view>
					<text>{{info.fraction}}</text>
					<text>得分</text>
				</view>
				<view class="line"></view>
				<view>
					<text>{{info.time}}</text>
					<text>用时</text>
				</view>
				<view class="line"></view>
				<view>
					<text>{{info.num}}</text>
					<text>超越人数</text>
				</view>
			</view>
		</view>
		<view class="answer-complete-award">
			<view>排名奖励，每天晚上10点30公布</view>
			<view class="answer-award">
				<view>
					<view class="no_award" style="padding-top: 12upx;box-sizing: border-box;"><image :src="achievementIcon"></image></view>
					<view class="award_title" v-if="info.reward.achievement_value>0">+{{info.reward.achievement_value}}</view>
					<view class="award_title" v-else>???</view>
				</view>
				<view v-if="info.reward.prize&&info.reward.prize_img">
					<view class="no_award" style="padding-top: 12upx;box-sizing: border-box;">
						<image :src="info.reward.prize_img"></image>
					</view>
					<view class="award_title">{{info.reward.prize}}</view>
				</view>
				<view v-else>
					<view class="no_award" style="line-height: 112upx;font-size: 40upx;color: #00A66A;">???</view>
					<view class="award_title">排名奖励</view>
				</view>
			</view>
		</view>
		<view class="answer-complete-share">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share" style="display:flex;align-items:center;padding-left:124upx;box-sizing: border-box;">
				<image :src="flauntIcon"></image>
				<view style="font-size:30upx;">炫耀一下</view>
			</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button @click="open_share_tip" style="display:flex;align-items:center;padding-left:124upx;box-sizing: border-box;">
				<image :src="flauntIcon"></image>
				<view style="font-size:30upx;">炫耀一下</view>
			</button>
			<!-- #endif -->
			<view style="font-weight: 550;">
				招募
				<text style="color: #FF3C00;">{{inviteNum}}位</text>
				好友考试，可以升级为队长
			</view>
		</view>
		
		<!-- #ifdef H5 -->
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share"><image class="popup_box_close_share" src="/static/share_tip.png"></image></view>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import {MinAndSec,TenHalf} from '@/common/util.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		onShareAppMessage(res) {
			if(this.$store.getters.getToken) {
				let data = {
					token: this.$store.getters.getToken,
					isNoNeedLoading: true
				}
				this.$api.add_jin_share(data).then(res=>{
					console.log('记录分享',res)
				}).catch(err => {
					console.log('记录分享',err)
				})
				return {
					title: this.shareData.share_copy,
					path: '/pages/home/topNominate/topNominate?share_id=' + this.$store.getters.getUserId+'&fromJin=1',
					imageUrl: this.shareData.img_src,
				}
			}
		},
		data() {
			return {
				inviteNum: this.$store.getters.getNum,
				achievementIcon: this.$store.state.imgUrl+'img/nominate/achievement-icon.png',
				flauntIcon: this.$store.state.imgUrl+'img/nominate/flaunt_icon.png',
				avatarUrl: '',
				nickName: '',
				info: {
					fraction: 0,
					time: '',
					num: 0,
					grade: '',
					people: 0,
					reward: {
						prize: '',
						prize_img: '',
						achievement_value: 0
					}
				},
				timeId: null,
				showGrade: false,
				shareData: {}
			}
		},
		onLoad() {
			try {
				const res = uni.getStorageSync('userInfo');
				if (res) {
                    console.log('头像',res);
					this.nickName = res.nickName
					this.avatarUrl = res.avatarUrl
				}
			} catch (e) {
				this.nickName = this.$store.state.nickName
				this.avatarUrl = this.$store.state.avatarUrl
			}
		},
		onShow() {
			this.getShareInfo()
			this.getData()
			this.getTime()
		},
		onHide() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		onUnload() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		methods: {
			getShareInfo() {
				let data ={
					token: this.$store.getters.getToken,
					isNoNeedLoading: true
				}
				this.$api.get_challenge_info(data).then(res=>{
					if(res.status) {
						this.shareData=res.data
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					this.H5share()
					console.log('获取信息',res)
				}).catch(err=>{
					console.log('获取信息',err)
				})
			},
			getTime() {
				this.timeId = setInterval(() => {
					let b = new Date().getTime()-TenHalf()
					if (b >= 0) { //过了10:30
						this.showGrade=true
					} else {
						this.showGrade=false
					}
				}, 1000)
			},
			getData() {
				let data = {
					token: this.$store.getters.getToken
				}
				this.$api.completeAnswer(data).then(res =>{
					if(res.status) {
						res.data.time = MinAndSec(res.data.time)
						this.info=res.data
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取信息',res)
				}).catch(err=>{
					console.log('获取信息',err)
				})
			},
			H5share(){
				if(this.$store.getters.getToken) {
					let data = {
						token: this.$store.getters.getToken,
						isNoNeedLoading: true
					}
					this.$api.add_jin_share(data).then(res=>{
						console.log('记录分享',res)
					}).catch(err => {
						console.log('记录分享',err)
					})
				}
				
				// H5分享
				let link=this.$store.state.H5URL+'pages/home/topNominate/topNominate?share_id=' + this.$store.getters.getUserId+'&fromJin=1'
				let share_detail = '这是金榜题名答题完成炫耀一下的分享详情'
				this.share(this.shareData.share_copy,share_detail, this.shareData.img_src,link=link)
				},
			open_share_tip(){
				this.$refs.shareTip.open();
			}
			
		}
	}
</script>

<style scope>
page{
	position: absolute;
	width: 100%;
	height: 1334upx;
	padding-bottom: 150upx;
	background: url('https://lightplanet.tuanhaoke.cn/img/nominate/answer_succeed_bg.png') no-repeat;
	background-size: 100% 1334upx;
}
/* #ifdef H5 */
page{
	position: absolute;
	width: 100%;
	height: 1334upx;
	padding-bottom: 150upx;
	background: url('https://lightplanet.tuanhaoke.cn/img/nominate/answer_succeed_bg.png') no-repeat;
	background-size: 100% 90%;
}
/* #endif */
.user-msg {
	position: absolute;
	bottom: 820upx;
	left: 50%;
	transform: translate(-50%, 0);
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* #ifdef H5 */
.user-msg {
    position: absolute;
    bottom: 730upx;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* #endif */
.user-msg > image {
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
}
.user-msg > text {
	display: block;
	font-size: 30upx;
	color: #333333;
	line-height: 42upx;
	margin-top: 4upx;
	text-align: center;
}
.answer-result {
	width: 614upx;
	position: absolute;
	bottom: 625upx;
	left: 68upx;
}
/* #ifdef H5 */
.answer-result {
	width: 614upx;
	position: absolute;
	bottom: 530upx;
	left: 68upx;
}
/* #endif */
.answer-result > view:first-child {
	width: 100%;
	height: 48upx;
	line-height: 48upx;
	text-align: center;
	background-color: #FFECEB;
	border-radius: 23upx;
	font-size: 24upx;
	color: #666666;
}
.answer-result-grade {
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding-top: 38upx;
	box-sizing: border-box;
}
.answer-result-grade > view > text {
	display: block;
}
.answer-result-grade > view > text:first-child {
	color: #333333;
	font-size: 36upx;
	line-height: 50upx;
	font-weight: 550;
}
.answer-result-grade > view > text:last-child {
	font-size: 24upx;
	color: #999999;
	line-height: 34upx;
}
.answer-result-grade > view:first-child {
	padding-left: 40upx;
	box-sizing: border-box;
}
.answer-result-grade > view:last-child {
	padding-right: 20upx;
	box-sizing: border-box;
}
.line {
	width: 2upx;
	height: 46upx;
	border-left: 2upx solid #efefef;
	margin-top: 20upx;
}
.answer-complete{
    margin-top: 150upx;
}
.answer-complete-award {
	width: 650upx;
	position: absolute;
	bottom: 255upx;
	left: 52upx;
}
/* #ifdef H5 */
.answer-complete-award {
	width: 650upx;
	position: absolute;
	bottom: 220upx;
	left: 52upx;
}
/* #endif */
.answer-complete-award > view:first-child {
	text-align: center;
	color: #ffffff;
	font-size: 24upx;
	line-height: 34upx;
}
.answer-complete-award .answer-award {
	display: flex;
	justify-content: space-around;
	margin-top: 25upx;
}
.answer-award > view {
	width: 150upx;
	height: 152upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.answer-award .no_award {
	width: 100%;
	height: 112upx;
	background: #ffe1e1;
	text-align: center;
}
.answer-award .award_title {
	width: 100%;
	height: 40upx;
	line-height: 40upx;
	background: #ffffff;
	color: #ff5c46;
	font-size: 24upx;
	text-align: center;
}
.answer-complete-award image {
	width: 88upx;
	height: 88upx;
}
.answer-complete-share {
	width: 100%;
	height: 180upx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	padding-top: 20upx;
	box-sizing: border-box;
	border-top-left-radius: 16upx;
	border-top-right-radius: 16upx;
}
/* #ifdef H5 */
.answer-complete-share {
	width: 100%;
	height: 180upx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	padding-top: 20upx;
	box-sizing: border-box;
	border-top-left-radius: 16upx;
	border-top-right-radius: 16upx;
}
/* #endif */
.answer-complete-share image{
	width: 40upx;
	height: 28upx;
	margin-right: 24upx;
}
.answer-complete-share>button{
	width: 430upx;
	height: 80upx;
	line-height: 80upx;
	border-radius: 40upx;
	background: linear-gradient(#CBEC00,#00A66A);
	box-shadow: 0 8upx 16upx 0 	rgba(0, 166, 106, 0.4);
	text-align: center;
	margin: 0 auto;
	color: #FFFFFF;
}
.answer-complete-share>view:last-child{
	text-align: center;
	color: rgba(0, 166, 106, 0.8);
	font-size: 24upx;
	margin-top: 20upx;
}

	/* 分享提示 */
	.popup_box_de_share {
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share {
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;
		right: 10upx;
	}
	.popup_box_title {
		display: flex;
		justify-content: space-between;
	}
	.popup_box_title > view:nth-child(2) {
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_title_tip {
		color: #999999;
		font-size: 24upx;
		text-align: center;
		margin-top: 10upx;
	}
	.popup_box_tip {
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title > .line {
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #dedede;
		margin-top: 24upx;
	}
	.popup_box_de {
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close {
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content {
		width: 100%;
		height: 682upx;
		background: #ffffff;
		position: absolute;
		top: 72upx;
		left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 40upx 46upx;
		box-sizing: border-box;
	}
	.popup_box_content > image {
		width: 388upx;
		height: 386upx;
		margin: 24upx auto 0;
		margin-left: 40upx;
	}
</style>